<!DOCTYPE html>
<html class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" href="/static/xadmin/css/font.css">
    <link rel="stylesheet" href="/static/xadmin/css/xadmin.css">
    <link rel="stylesheet" href="/static/css/apublic.css">
    <script src="/static/xadmin/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/static/xadmin/js/xadmin.js"></script>
    <!--[if lt IE 9]>
    <script src="/static/xadmin/html5.min.js"></script>
    <script src="/static/xadmin/respond.min.js"></script>
    <![endif]-->
    <script src="/static/until.js" charset="utf-8"></script>
    <script src="/static/vue.js" charset="utf-8"></script>
    <script>
        if(!sessionStorage.getItem('token')) window.top.location.href='/login.html';
    </script>
    <style>
        body{
            background:#fff;
        }
        [v-cloak] {
            display: none !important;
        }
        .layui-icon-close{
            cursor:pointer;
        }
        .layui-icon-close:hover{
            color:red;
        }
        input{
            border-width: 1px;
            border-style: solid;
            background-color: #fff;
            border-radius: 2px;
            border-color: #e6e6e6;
            padding:3px 5px;
            width:50%;
        }
        table{
            width:100%;
            margin-top:1px;
        }
        .tb-header{
            text-align: center;
            background:#eee;
        }
        table td{
            padding:5px!important;
            border:1px solid #e6e6e6;
        }
        table input{
            width:50px!important;
        }
        .title{
            background:#eee;
            font-size:14px;
            font-weight: bold;
            padding:5px;
            display:flex;
            justify-content: space-between;
            align-items: center;
        }
        .title>span:last-child{
            cursor: pointer;
            background:#009688;
            color:#fff;
            padding:0px 5px;
        }
        .addattr{
            cursor: pointer;
            padding:5px 5px;
            display:block;
            width:100px;
            margin-top:3px;
        }
        /*attr*/
        .item-attr{
            display:flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            padding:2px 0px;
        }
        .item-attr span{
            border-radius: 0px;
        }
        .item-attr>div:first-child{
            display:flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
        }
        .item-attr>div:last-child{
            font-size:12px;
            margin-left:15px;
        }
        .btn{
            cursor:pointer;
        }
    </style>
</head>
<body>
<div v-cloak class="layui-fluid" id="app">
    <div class="layui-row">
        <div class="title"><span>属性</span><span class="layui-btn layui-btn-small" v-on:click="add">添加属性</span></div>
        <div class="attr">
            <div v-for="(item,index) in goods.goods_attr" class="item-attr">
                <div>
                    <span class="layui-badge">{{item.goods_attribute.title}}</span>
                    <div>
                        <span class="layui-badge layui-bg-blue" v-for="itemc in item.goods_attribute.goods_attribute_value">{{itemc.title}}</span>
                    </div>
                </div>
                <div>
                    <span class="btn" v-on:click="editattr(item.goods_id,item.attribute_id)">编辑</span>
                    <span class="btn" v-on:click="delattr(item.goods_id,item.attribute_id)">删除</span>
                </div>
            </div>
            
        </div>
        <div class="title"><span>规格</span><span class="layui-btn layui-btn-small" v-on:click="savespec">保存规格</span></div>
        <div>
            <table>
                <tr class="tb-header">
                    <td v-for="(item,index) in goods.goods_attr">
                        {{item.goods_attribute.title}}
                    </td>
                    <td>价格</td>
                    <td>库存</td>
                </tr>
                <tr v-for="item in goods.goods_spec">
                        <td v-for="it in item.title.split('/')">{{it}}</td>
                        <td><input :value="item.price" v-model="item.price"></td>
                        <td><input :value="item.num" v-model="item.num"></td>
                </tr>
            </table>
        </div>
    </div>
</div>
<script>
    layui.use(['layer','jquery'],
        function() {
            $ = layui.jquery;
            var app = new Vue({
                el: '#app',
                data: {
                    goods:{},
                    loading:null
                },
                created:function(){
                    this.getgoods()
                },
                mounted () {
                    window.getgoods = () => {
                        this.getgoods()
                    }
                },
                methods:{
                    getgoods(){
                        var that=this
                        u_post("/goods/detail",{id:getQueryString("id")},function(res){
                            if(res.status.errorCode==0) {
                                that.goods=res.data
                            }
                            else{
                                layer.alert(res.status.msg, {icon: 5})
                            }
                        });
                    },
                    add(){
                        xadmin.open('添加属性','./add.html?id='+getQueryString("id"),400,300)
                    },
                    addval(index){
                        this.goods.goods_attr[index].goods_attribute.goods_attribute_value.push(
                                                                {
                                                                    "id": 0,
                                                                    "attribute_id": 0,
                                                                    "title": ""
                                                                })
                        this.spec_info=this.resData(this.goods.goods_attr,this.goods.goods_spec)
                    },
                    delattr(goods_id,attribute_id){
                        var that=this
                        u_post("/goods/del_attr",{goods_id:goods_id,attribute_id:attribute_id},function(res){
                            if(res.status.errorCode==0) {
                                that.getgoods()
                            }
                            else{
                                layer.alert(res.status.msg, {icon: 5})
                            }
                        });
                    },
                    editattr(goods_id,attribute_id){
                        xadmin.open('添加属性','./edit.html?goods_id='+goods_id+"&attribute_id="+attribute_id,400,300)
                    },
                    savespec(){
                        var that=this
                        that.goods.goods_spec.forEach(element => {
                            element.price=Number(element.price)
                            element.num=Number(element.num)
                        });
                        u_post("/goods/save_spec",JSON.stringify(that.goods.goods_spec),function(res){
                            if(res.status.errorCode==0) {
                                that.getgoods()
                                layer.msg("完成")
                            }
                            else{
                                layer.alert(res.status.msg, {icon: 5})
                            }
                        });
                    }
                }
            }) 

        })
 
    
</script>
</body>

</html>
